<template>
  <div class="home">
    <tagRouter></tagRouter>
    <SearchForm :queryForm="queryForm">
      <template #searcContent>
        <el-form-item label="模板Id" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请输入模板Id"
            clearable
          />
        </el-form-item>
        <el-form-item label="模板名称" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请输入模板名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建者" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请输入创建者"
            clearable
          />
        </el-form-item>
        <el-form-item label="模板平台" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请输入创建平台"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建时间" label-width="70">
          <el-date-picker
            v-model="queryForm.date"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择创建时间"
            clearable
          />
        </el-form-item>
      </template>
      <template #searchBtn>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </template>
    </SearchForm>
    <bulkOperations>
      <template #operation>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">指定模板</el-button>
        <el-button type="primary">刷新</el-button>
      </template>
    </bulkOperations>
    <Table :tableBind="tableBind" :tableList="tableList">
      <template #operation="scope">
        <el-text class="mx-1" type="primary" @click="edit(scope)">编辑</el-text>
        <el-text class="mx-1" type="primary" @click="del(scope)">删除</el-text>
        <el-text class="mx-1" type="primary" @click="details(scope)"
          >详情</el-text
        >
      </template>
    </Table>
    <Pagination @current-change="getCurrent"></Pagination>
    <DrawerDialog ref="drawerDialogRef" :widthMinus="0" :dialogType="'drawer'">
      <template #drawerContent>
        <LowCodeAdd @closeTamplat="TamplatdrawerDialog"></LowCodeAdd>
      </template>
    </DrawerDialog>
  </div>
</template>

<script setup lang="ts">
import tagRouter from "@/components/tagRouter/index.vue";
import Table from "@/components/table/index.vue";
import Pagination from "@/components/pagination/index.vue";
import SearchForm from "@/components/searchForm/index.vue";
import bulkOperations from "@/components/bulkOperations/index.vue";
import DrawerDialog from "@/components/drawerDialog/index.vue";
import LowCodeAdd from "@/pages/lowCode/components/lowCodeAdd/index.vue";
import {
  reactive,
  onMounted,
  onActivated,
  onDeactivated,
  ref,
} from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const drawerDialogRef = ref(null);
const tableBind: any = reactive([
  {
    label: "模板Id",
    property: "templateId",
  },
  {
    label: "模板名称",
    property: "templateName",
  },
  {
    label: "模板平台",
    property: "templatePlatform",
  },
  {
    label: "模板平台",
    property: "templatePlatform",
  },
  {
    label: "创建者",
    property: "templateCreatedBy",
  },
  {
    label: "备注",
    property: "remark",
  },
]);
const tableList: any = [
  {
    templateId: "1",
    templateName: "H5的模板",
    templateCreatedBy: "创建者",
    templatePlatform: "模板平台",
    creatTime: "2024-03-01",
    remark: "备注",
  },
  {
    templateId: "1",
    templateName: "H5的模板",
    templateCreatedBy: "创建者",
    templatePlatform: "模板平台",
    creatTime: "2024-03-01",
    remark: "备注",
  },
  {
    templateId: "1",
    templateName: "H5的模板",
    templateCreatedBy: "创建者",
    templatePlatform: "模板平台",
    creatTime: "2024-03-01",
    remark: "备注",
  },
];
const queryForm: any = reactive({
  user: "",
  region: "",
  date: "",
});
// 提交搜索
const onSubmit = () => {
  console.log(queryForm, "提交");
};
// 重置搜索项 清空搜索的的值
const onReset = () => {
  Object.keys(queryForm).forEach((key: any) => {
    queryForm[key] = "";
  });
};
// 编辑
const edit = (scope: any) => {
  console.log(scope);
};
// 删除
const del = (scope: any) => {
  console.log(scope.scope.row);
};
// 进入详情
const details = (scope: any) => {
  console.log(scope.scope.row);
  router.push("/home/details");
};
// 获取当前的页数
const getCurrent = (current: any) => {
  console.log(current, "当前的页数");
};
// 开启关闭add弹框
const TamplatdrawerDialog = () => {
  drawerDialogRef.value.showFun();
};
// 新增模板
const add = () => {
  TamplatdrawerDialog();
};
onActivated(() => {
  console.log("当组件从缓存中被激活时调用");
});
onDeactivated(() => {
  console.log("当组件被 <keep-alive> 移除时调用");
});
// 页面加载
onMounted(() => {
});
</script>

<style lang="scss" scoped></style>
